<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>俄罗斯方块</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background: lightslategray;
			}
			
			.box {
				width: 500px;
				height: 500px;
				background-color: white;
				
				margin: 20px;
				position: absolute;
			}
			
			.b {
				width: 96px;
				height: 96px;
				margin: 2px;
				
				
				
			}
			
			.green {
				background-color: #66cd00;
				border-radius: 10px;
				color:#66cd00;
			}
			
			.zi {
				background-color: #8168ea;
				border-radius: 10px;
				color:#8168ea;
			}
			
			.yellow {
				background-color: #face47;
				border-radius: 10px;
				color:#face47;
			}
			
			.blue {
				background-color: #1ec0ff;
				border-radius: 10px;
				color:#1ec0ff;
			}
			
			.pink {
				background-color: #e86a80;
				border-radius: 10px;
				color:#e86a80;
			}
			
			.green1 {
				position: absolute;
				left: 100px;
			}
			
			.green2 {
				position: absolute;
				left: 200px;
			}
			
			.green3 {
				position: absolute;
				left: 300px;
			}
			.green4 {
				position: absolute;
				left: 200px;
				top: 100px;
			}
			.green5 {
				position: absolute;
				left: 200px;
				top: 200px;
			}
			.green6 {
				position: absolute;
				left: 400px;
				top: 300px;
			}
			.green7 {
				position: absolute;
				top: 400px;
				left: 100px;
			}
			.zi1{
				position: absolute;
				top:200px;
			}
			.zi2{
				position: absolute;
				top:400px;
				left:300px;
			}
			.yellow1{
				position: absolute;
				top:300px;
				left:100px;
			}
			.yellow2{
				position: absolute;
				top:200px;
				left:400px;
			}
			.blue1{
				position: absolute;
				top:400px;
				left:0px;
				border-bottom-left-radius: 50px;
			}
			.blue2{
				position: absolute;
				top:300px;
				left:300px;
			}
			.pink1{
				position: absolute;
				top:400px;
				left:400px;
				border-bottom-right-radius: 50px;
			}
			.pink2{
				position: absolute;
				top:300px;
				left:0px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="b green green1">绿1</div>
			<div class="b green green2">绿2</div>
			<div class="b green green3">绿3</div>
			<div class="b green green4">绿4</div>
			<div class="b green green5">绿5</div>
			<div class="b green green6">绿6</div>
			<div class="b green green7">绿7</div>
			<div class="b zi zi1">紫1</div>
			<div class="b zi zi2">紫2</div>
			<div class="b yellow yellow1">黄1</div>
			<div class="b yellow yellow2">黄2</div>
			<div class="b blue blue1">蓝1</div>
			<div class="b blue blue2">蓝2</div>
			<div class="b pink pink1">粉1</div>
			<div class="b pink pink2">粉2</div>
		</div>
	</body>

</html>